import React, { useEffect, useState } from 'react'
import { Button, SearchBar, Tabs, Toast, List, Modal } from 'antd-mobile'
import request from '../../../api/request'
import style from './search.module.css'
import Navbar from '../../../compounts/navber/Navbar'
import { DeleteOutline } from 'antd-mobile-icons'
import { useDispatch, useSelector } from 'react-redux'
import { addHistory, clearHistory } from '../../../store/stateSlice/state'


function Idex() {
    // 热门搜索数据
    const [hotdata, setHotdata] = useState([])
    // 搜索结果数据
    const [searchdata, setSearchdata] = useState([])
    // 获取仓库中存储的历史搜索
    const history = useSelector(state => state.store.history)
    // 调用仓库方法
    const dispatch = useDispatch()



    // 搜索框
    const searchbtn = (value) => {
        dispatch(addHistory(value))
        console.log(value);
        request.get('/share/v1/homePageSearch', {
            params: {
                keyWord: value
            }
        }).then((res) => {
            console.log(res);
            setSearchdata(res.data.result.diseaseSearchVoList)
        })

    }

    // 热门搜索
    useEffect(() => {
        request.get('/share/v1/popularSearch').then((res) => {
            console.log(res);
            setHotdata(res.data.result)
        })
    }, [])
    return (
        <div className={style.box}>
            <Navbar title={'搜索'}></Navbar>
            {/* 搜索框 */}
            <SearchBar style={{ marginTop: '1px', '--border-radius': '50px' }} onSearch={(value) => searchbtn(value)}
                placeholder='医院、直播、科普' showCancelButton autoFocus />

            {
                searchdata.length > 0 ? <div>
                    <List header='搜索结果'>
                        {
                            searchdata.map((item, index) => {
                                return <List.Item key={index}>{item.diseaseName}</List.Item>
                            })
                        }
                    </List>
                </div> : <div>
                    {/* tab切换 */}
                    <Tabs style={{ '--title-font-size': '14px', '--fixed-active-line-width': '10px', marginTop: '15px' }}
                        activeLineMode='fixed'
                    >
                        <Tabs.Tab title='综合' key='fruits' />
                        <Tabs.Tab title='医生' key='vegetables' />
                        <Tabs.Tab title='直播' key='animals' />
                        <Tabs.Tab title='科普' key='kepu' />
                        <Tabs.Tab title='医院' key='yiyuan' />
                    </Tabs>
                    {/* 搜索历史区域 */}
                    <div className={style.historybox}>
                        <div className={style.start1}>
                            <span className={style.historytitle}>历史搜索</span>
                            <DeleteOutline
                                onClick={() =>
                                    Modal.confirm({
                                        content: '你确定要删除全部数据吗？',
                                        onConfirm: async () => {
                                            dispatch(clearHistory())
                                            Toast.show({
                                                icon: 'success',
                                                content: '删除成功',
                                                position: 'bottom',
                                            })
                                        },
                                    })
                                }
                            />
                        </div>
                        <ul className={style.historyinner}>
                            {
                                history.map((item, index) => {
                                    return <li key={index} className={style.historyitem}>{item}</li>
                                })
                            }
                        </ul>

                    </div>
                    {/* 热门搜索区域 */}
                    <div className={style.hotbox}>
                        <div className={style.title}>热门搜索</div>
                        {hotdata.map((item, index) => {
                            return <div className={style.hotlist}>
                                <div className={style.id}>{index + 1}</div>
                                <div className={style.listinner}>{item.name}</div>
                            </div>
                        })
                        }
                    </div>
                </div>
            }
        </div>
    )
}

export default Idex
